<ng-container *ngIf="selected.length > 0; then contextMenu; else noContexts">
</ng-container>

<ng-template #contextMenu>
  <clr-dropdown class="dropdown-top" [clrCloseMenuOnItemClick]="true">
    <button class="dropdown-button" type="button" clrDropdownTrigger>
      <clr-icon shape="cluster"></clr-icon>
      {{ selected | truncate }}
      <clr-icon shape="caret down"></clr-icon>
    </button>
    <clr-dropdown-menu
      class="dropdown-top"
      *clrIfOpen
      [clrPosition]="'bottom-right'"
    >
      <label class="dropdown-header">Contexts</label>

      <ng-container *ngFor="let context of contexts; trackBy: trackByFn">
        <button
          class="dropdown-button"
          type="button"
          [ngClass]="contextClass(context)"
          clrDropdownItem
          (click)="selectContext(context)"
          title="{{ context.name }}"
        >
          {{ context.name | truncate }}
        </button>
      </ng-container>
    </clr-dropdown-menu>
  </clr-dropdown>
</ng-template>

<ng-template #noContexts>
  <a href="javascript://" class="nav-link nav-icon-text">
    <span class="nav-text">No contexts!</span>
  </a>
</ng-template>
